@use "var" as *;

$minWidth: 1000px;

@mixin height-transition {
  transition: height 200ms ease-in;
}

// main-container global css
.main-container {
  min-width: $minWidth;
  overflow-x: auto;
  width: 100%;

  .breadcrumb-wrapper {
    padding: 20px 10px 10px 10px;
  }

  .search-wrapper {
    padding: 2px 5px 10px 5px;
    height: auto;

    .text-right {
      text-align: right;

      .el-input, .el-select {
        width: 500px;
        min-width: 280px;
      }
    }

    .filter-item {
      margin-left: 5px;
      margin-right: 5px;
      vertical-align: middle;
    }

    .el-input, .el-select {
      width: 200px;
    }

    .el-range-editor {
      width: 300px;
    }

    .el-button--mini,
    .el-button--mini.is-round {
      padding: 6px 8px;
    }
  }

  .search-more-wrapper {
    height: auto;
    line-height: 40px;
    z-index: 999;
    position: inherit;
    border: none;
    width: 100%;
    min-width: $minWidth;
    @include height-transition;

    .el-row {
      width: 100%;
      line-height: 40px;
      transition: opacity 300ms ease-in-out;
    }

    .el-select,
    .el-input {
      width: 260px;
    }

    .el-range-editor,
    .el-cascader {
      width: 240px;
    }

    .search-label {
      font-size: 12px;
      color: #606266;
      padding-left: 20px;
    }

    .text-right {
      text-align: right;
    }
  }

  .table-wrapper {
    padding: 0 10px;

    .el-table__inner-wrapper {
      @include height-transition;
    }

    .el-table {
      @include height-transition;

      .el-table__fixed {
        bottom: 12px !important;
      }
    }

    .el-table__fixed,
    .el-table__fixed-right {
      overflow-x: scroll;
    }

    .el-table thead {
      th .cell {
        text-align: center;
      }
    }

    .el-link {
      font-size: 12px;
      cursor: pointer;
    }

    .table-link-btn {
      font-size: 16px;
      margin-right: 3px;
      margin-left: 3px;

      .edit {

      }

      .delete {

      }
    }

    .event-log-link-btn {
      color: lightseagreen;
    }

    .table-copy-left-btn {
      margin-right: 5px;
      cursor: pointer;
    }

    .table-copy-right-btn {
      margin-right: 5px;
    }
  }

  .page-wrapper {
    padding: 5px 10px;
    position: absolute;
    bottom: 10px;
    right: 20px;
  }

  .pagination {
    padding: 5px 10px;
    position: absolute;
    bottom: 10px;

    .pagination-left {
      float: left;
      margin-left: 10px;
    }

    .pagination-right {
      float: right;
    }
  }
}

.table-button {
  cursor: pointer;
  color: #2193e5;

  i {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: 3px;
  }
}

.table-button:hover {
  color: deepskyblue;
  transition: all 0.5s;
}

.table-button:not(:first-child) {
  margin-left: .5rem;
}

.table-button:hover {
  color: deepskyblue;
  transition: all 0.5s;
}

.table-button:not(:first-child) {
  margin-left: .5rem;
}

.column-copy-active {
  background-color: #8addff !important;
  color: #fff !important;
  border: 0 !important;
  animation: all .5s;
}
